<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="net.sycu.guomy.ems.entity.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <!-- Title and other stuffs -->
  <title>修改个人信息</title> 
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="">
  <!-- Stylesheets -->
  <link href="/EMS/style/bootstrap.css" rel="stylesheet">
  <!-- Font awesome icon -->
  <link rel="stylesheet" href="/EMS/style/font-awesome.css"> 
  <!-- jQuery UI -->
  <link rel="stylesheet" href="/EMS/style/jquery-ui.css"> 
  <!-- Calendar -->
  <link rel="stylesheet" href="/EMS/style/fullcalendar.css">
  <!-- prettyPhoto -->
  <link rel="stylesheet" href="/EMS/style/prettyPhoto.css">  
  <!-- Star rating -->
  <link rel="stylesheet" href="/EMS/style/rateit.css">
  <!-- Date picker -->
  <link rel="stylesheet" href="/EMS/style/bootstrap-datetimepicker.min.css">
  <!-- CLEditor -->
  <link rel="stylesheet" href="/EMS/style/jquery.cleditor.css"> 
  <!-- Uniform -->
  <link rel="stylesheet" href="/EMS/style/uniform.default.css"> 
  <!-- Bootstrap toggle -->
  <link rel="stylesheet" href="/EMS/style/bootstrap-switch.css">
  <!-- Main stylesheet -->
  <link href="/EMS/style/style.css" rel="stylesheet">
  <!-- Widgets stylesheet -->
  <link href="/EMS/style/widgets.css" rel="stylesheet">   
  
  <!-- HTML5 Support for IE -->
  <!--[if lt IE 9]>
  <script src="/EMS/js/html5shim.js"></script>
  <![endif]-->

  <!-- Favicon -->
  <link rel="shortcut icon" href="/EMS/img/favicon/favicon.png">
</head>

<body onload="myLoad()">

<jsp:include page="/HeaderServlet"></jsp:include>

<!-- Main content starts -->

<div class="content">

<%@ include file="/user/userSidebar.jsp" %>

        <!-- Main bar -->
    <div class="mainbar">
      
      <!-- Page heading -->
      <div class="page-head">
        <h2 class="pull-left"><i class="icon-home"></i> 首页</h2>

        <!-- Breadcrumb -->
        <div class="bread-crumb pull-right">
          <a href="index.html"><i class="icon-home"></i> 首页</a> 
          <!-- Divider -->
          <span class="divider">/</span> 
          <a href="#" class="bread-current">控制台</a>
        </div>

        <div class="clearfix"></div>

      </div>
      <!-- Page heading ends -->



      <!-- Matter -->

      <div class="matter">
        <div class="container">

          <div class="row">

          <!-- Form starts.  -->
            <div class="col-md-12">

              <div class="widget wgreen">
                <div class="widget-head">
                  <div class="pull-left">修改个人信息</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>
                  <div class="clearfix"></div>
                </div>

                <div class="widget-content">
                  <div class="padd">
          <form class="form-horizontal" role="form" id="frmModifyInformation"
            action="/EMS/user/ModifyInformationServlet" method="post" >
                    <div class="form-group">
                      <label class="col-lg-4 control-label">登录名</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtLoginName" name="txtLoginName" 
                          placeholder="登录名" value="${sessionScope.Login.loginName }" readonly="readonly">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">Email</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtEmail" name="txtEmail" 
                          placeholder="Email" value="${sessionScope.Login.email }">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">昵称</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtNickname" name="txtNickname" 
                          placeholder="昵称" value="${sessionScope.Login.nickname }">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">姓名</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtUserName" name="txtUserName" 
                          placeholder="姓名" value="${user.userName }">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">性别</label>
                      <div class="col-lg-8">
                        <input type="radio" name="radGender" value="女" <c:if test="${user.gender == '女'}">checked</c:if>>女
	                      &nbsp;&nbsp;
	                      <input type="radio" name="radGender" value="男" <c:if test="${user.gender == '男'}">checked</c:if>>男
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">生日</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtBirthday" name="txtBirthday" 
                          placeholder="生日" value="${user.birthday }">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">证件号</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtCardId" name="txtCardId" 
                          placeholder="证件号" value="${user.cardId }">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">备注</label>
                      <div class="col-lg-8">
                        <textarea class="form-control" rows="3" id="txtRemark" name="txtRemark" 
                          placeholder="备注">${user.remark }</textarea>
                      </div>
                    </div>
          </form>
                    <hr />
                    <div class="form-group">
                      <div class="col-lg-offset-1 col-lg-9">
                         <button type="reset" class="btn btn-primary" onclick="modifyInformation()" >修改</button>
                         <button type="reset" class="btn btn-default">取消</button>
                      </div>
                    </div>
                    <br />
                  </div>
                </div>
                <div class="widget-foot">
                  <!-- Footer goes here -->
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    <!-- Matter ends -->

    </div>

   <!-- Mainbar ends -->
   <div class="clearfix"></div>

</div>
<!-- Content ends -->

<%@ include file="/footer.jsp" %>

<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span> 

<!-- JS -->
<script src="/EMS/js/jquery.js"></script> <!-- jQuery -->
<script src="/EMS/js/bootstrap.js"></script> <!-- Bootstrap -->
<script src="/EMS/js/jquery-ui-1.9.2.custom.min.js"></script> <!-- jQuery UI -->
<script src="/EMS/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="/EMS/js/jquery.rateit.min.js"></script> <!-- RateIt - Star rating -->
<script src="/EMS/js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->

<!-- jQuery Flot -->
<script src="/EMS/js/excanvas.min.js"></script>
<script src="/EMS/js/jquery.flot.js"></script>
<script src="/EMS/js/jquery.flot.resize.js"></script>
<script src="/EMS/js/jquery.flot.pie.js"></script>
<script src="/EMS/js/jquery.flot.stack.js"></script>

<!-- jQuery Notification - Noty -->
<script src="/EMS/js/jquery.noty.js"></script> <!-- jQuery Notify -->
<script src="/EMS/js/themes/default.js"></script> <!-- jQuery Notify -->
<script src="/EMS/js/layouts/bottom.js"></script> <!-- jQuery Notify -->
<script src="/EMS/js/layouts/topRight.js"></script> <!-- jQuery Notify -->
<script src="/EMS/js/layouts/top.js"></script> <!-- jQuery Notify -->
<!-- jQuery Notification ends -->

<script src="/EMS/js/sparklines.js"></script> <!-- Sparklines -->
<script src="/EMS/js/jquery.cleditor.min.js"></script> <!-- CLEditor -->
<script src="/EMS/js/bootstrap-datetimepicker.min.js"></script> <!-- Date picker -->
<script src="/EMS/js/jquery.uniform.min.js"></script> <!-- jQuery Uniform -->
<script src="/EMS/js/bootstrap-switch.min.js"></script> <!-- Bootstrap Toggle -->
<script src="/EMS/js/filter.js"></script> <!-- Filter for support page -->
<script src="/EMS/js/custom.js"></script> <!-- Custom codes -->
<script src="/EMS/js/charts.js"></script> <!-- Charts & Graphs -->

<!-- Script for this page -->
<script type="text/javascript">
$(function () {

    /* Bar Chart starts */

    var d1 = [];
    for (var i = 0; i <= 20; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);

    var d2 = [];
    for (var i = 0; i <= 20; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);


    var stack = 0, bars = true, lines = false, steps = false;
    
    function plotWithOptions() {
        $.plot($("#bar-chart"), [ d1, d2 ], {
            series: {
                stack: stack,
                lines: { show: lines, fill: true, steps: steps },
                bars: { show: bars, barWidth: 0.8 }
            },
            grid: {
                borderWidth: 0, hoverable: true, color: "#777"
            },
            colors: ["#ff6c24", "#ff2424"],
            bars: {
                  show: true,
                  lineWidth: 0,
                  fill: true,
                  fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.8 } ] }
            }
        });
    }

    plotWithOptions();
    
    $(".stackControls input").click(function (e) {
        e.preventDefault();
        stack = $(this).val() == "With stacking" ? true : null;
        plotWithOptions();
    });
    $(".graphControls input").click(function (e) {
        e.preventDefault();
        bars = $(this).val().indexOf("Bars") != -1;
        lines = $(this).val().indexOf("Lines") != -1;
        steps = $(this).val().indexOf("steps") != -1;
        plotWithOptions();
    });

    /* Bar chart ends */

});


/* Curve chart starts */

$(function () {
    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot = $.plot($("#curve-chart"),
           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
               series: {
                   lines: { show: true, fill: true},
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true, borderWidth:0 },
               yaxis: { min: -1.2, max: 1.2 },
               colors: ["#1eafed", "#1eafed"]
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #000',
            padding: '2px 8px',
            color: '#ccc',
            'background-color': '#000',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#curve-chart").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    
                    showTooltip(item.pageX, item.pageY, 
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        }
    }); 

    $("#curve-chart").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });

});

/* Curve chart ends */
</script>

<script type="text/javascript">
function checkInput() {
  var txtOldPassword = document.getElementById("txtOldPassword");
  var spanOldPassword = document.getElementById("spanOldPassword");
  var txtNewPassword = document.getElementById("txtNewPassword");
  var spanNewPassword = document.getElementById("spanNewPassword");
  var txtVPassword = document.getElementById("txtVPassword");
  var spanVPassword = document.getElementById("spanVPassword");
  var flag = true;
/*
  if (txtOldPassword.value.length == 0) {
    flag = false;
    spanOldPassword.innerHTML = "原密码不能为空。";
  }
  if (txtNewPassword.value.length == 0) {
    flag = false;
    spanNewPassword.innerHTML = "新密码不能为空。";
  }
  else if (txtNewPassword.value.length < 6) {
    flag = false;
    spanNewPassword.innerHTML = "密码不能少于6个字符。";
  }
  if (txtNewPassword.value != txtVPassword.value) {
    flag = false;
    spanVPassword.innerHTML = "确认密码与新密码不一致。";
  }*/
  
  return flag;
}

function modifyInformation() {
  if (checkInput()) {
    var frmModifyInformation = document.getElementById("frmModifyInformation");
    frmModifyInformation.submit();
  }
}
function myLoad() {
  ${alertMessage}
}
</script>

</body>
</html>